<template>
  <!-- 广告组件 -->
  <div class="home-top">
    <div class="logo">
        <a href="javascript:;"></a>
        <div class="text">
            <p>王者荣耀</p>
            <span>团队成就更多</span>
        </div>
    </div>
    <div class="download">
        <p>立即下载</p>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.home-top {
    position: fixed;
    display: flex;
    justify-content: space-between;
    padding: .2rem .5rem;
    width: 360px;   // 本 500，但是写 500px 他会转换为 rem，就没有500这个大小了。
    height: 1.19rem;
    background-color: #131528;
}

// logo 部分
.logo {
    display: flex;
    width: 3rem;
    color: #fff;
    a {
        display: inline-block;
        width: 0.777rem;
        height: 100%;
        background: url(~/assets/img/icon.png) no-repeat 0 72.588%;
        background-size: 10rem;
        margin-right: .15rem;
    }
    .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        p {
            font-size: .3rem;
            margin: 0;
        }
        span {
            color: rgb(124, 124, 124);
            font-size: 0.27rem;
        }
    }
}

// 下载按钮部分
.download {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    height: .638rem;
    padding: 0 .2rem;
    border-radius: .08rem;
    background-color: #ff8f00;

    display: flex;
    justify-content: center;
    align-items: center;
    p {
        font-size: .3rem;
    }
}
</style>
